<template>
  <dv-border-box-8 style="height: 255px; padding: 5px">
    <dv-decoration-7 style="height: 30px; text-align: center"
      >口味销量额排行</dv-decoration-7
    >
    <dv-capsule-chart v-show="show" id="chart10" :config="config" style="height: 230px" />
    <span class="llq" v-show="!show">空</span>
  </dv-border-box-8>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      orderBy: 0,
      config: {
        data: [],
      },
      show:true
    };
  },
  mounted() {
    this.get_list();
  },
  watch: {
    "$store.state.orderBy"(newVal) {
      this.orderBy = newVal;
      this.get_list();
    },
  },
  methods: {
    get_list() {
      echarts.dispose(document.getElementById("chart10"));
      this.$http.get(`/bill/tasteRank?orderBy=${this.orderBy}`).then((res) => {
        res.data.length?this.show=true:this.show=false
        this.config = {
          showValue: true,
          unit: "元",
          data: res.data
            .map((v) => {
              return {
                name: v.dishName + "(" + v.name + ")",
                value: v.totalCustom,
              };
            })
            .slice(0, 10),
        };
        console.log(this.config);
      });
    },
  },
};
</script>

<style scoped>
.llq{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
</style>
